Add Charts into Our React App with Victory — Gradient and Image Background, and Animations

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Victory.

Gradient Background for Polar Charts

We can add gradients for polar charts with the radialGradient component/

For instance, we can write:

import React from "react";
import { VictoryChart, VictoryPolarAxis, VictoryScatter } from "victory";

export default function App() {
  return (
    <div>
      <svg>
        <defs>
          <radialGradient id="radial_gradient">
            <stop offset="10%" stopColor="red" />
            <stop offset="95%" stopColor="gold" />
          </radialGradient>
        </defs>
      </svg>
      ​
      <VictoryChart
        polar
        style={{
          background: { fill: "url(#radial_gradient)" }
        }}
      >
        <VictoryScatter />
        <VictoryPolarAxis
          style={{
            tickLabels: { angle: 0 }
          }}
          tickValues={[0, 90, 180, 270]}
        />
      </VictoryChart>
    </div>
  );
}

We add the stop component with the offset prop to set the amount of the color to see in the gradient.

The VictoryPolarAxis component lets us add the axis for the chart.

The VictoryChart component has the polar prop to add a polar chart/

Charts with Images

We can add charts with background images by setting the backgroundComponent prop of VictoryChart .

For instance, we can write:

import React from "react";
import { VictoryAxis, VictoryChart, VictoryLine } from "victory";

const CustomBackground = (props) => {
  return <image href={"https://picsum.photos/id/906/525/300.jpg"} {...props} />;
};

const Matterhorn = (props) => {
  return (
    <VictoryChart
      domain={{ y: [2000, 5000] }}
      style={{ background: { opacity: 0.8 } }}
      backgroundComponent={<CustomBackground />}
    >
      <VictoryLine
        data={[
          { x: 0, y: 2500 },
          { x: 1.25, y: 2600 },
          { x: 1.8, y: 3000 },
          { x: 2.7, y: 3300 },
          { x: 3.1, y: 3800 },
          { x: 3.25, y: 4000 },
          { x: 3.5, y: 4000 },
          { x: 4, y: 4478, label: "4,478m" },
          { x: 4.5, y: 4300 },
          { x: 5.1, y: 4200 },
          { x: 6.3, y: 3500 },
          { x: 6.75, y: 3400 },
          { x: 7, y: 3300 },
          { x: 7.25, y: 3200 },
          { x: 9, y: 2900 },
          { x: 12, y: 2000 }
        ]}
        style={{
          data: { strokeWidth: 4 }
        }}
      />
      <VictoryAxis dependentAxis />
    </VictoryChart>
  );
};

export default function App() {
  return <Matterhorn />;
}

We add the CustomBackground component and set that as the value of the backgroundComponent to display the image as the background image.

Animations

We can add animations to our Victory charts with the animate prop.

For instance, we can write:

import React, { useEffect, useState } from "react";
import { VictoryChart, VictoryScatter } from "victory";

const random = (min, max) => Math.floor(min + Math.random() * max);

const getScatterData = () => {
  const colors = [
    "violet",
    "cornflowerblue",
    "gold",
    "orange",
    "turquoise",
    "tomato",
    "greenyellow"
  ];
  const symbols = [
    "circle",
    "star",
    "square",
    "triangleUp",
    "triangleDown",
    "diamond",
    "plus"
  ];
  return Array(25)
    .fill()
    .map((index) => {
      const scaledIndex = Math.floor(index % 7);
      return {
        x: random(10, 50),
        y: random(2, 100),
        size: random(8) + 3,
        symbol: symbols[scaledIndex],
        fill: colors[random(0, 6)],
        opacity: 0.6
      };
    });
};

export default function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const timer = setInterval(() => {
      setData(getScatterData());
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <VictoryChart animate={{ duration: 2000, easing: "bounce" }}>
      <VictoryScatter
        data={data}
        style={{
          data: {
            fill: ({ datum }) => datum.fill,
            opacity: ({ datum }) => datum.opacity
          }
        }}
      />
    </VictoryChart>
  );
}

to set the animate prop to set the duration and easing of the animation.

Whenever we change the data state, the chart will re-render with the new data values.

getScatterData just returns an array of values for the scatterplot.

Conclusion

We can add gradients for the polar chart and animations to charts in our React app with Victory.